<template>
  <a-card :bordered="false" class="card-area">
    <div>
      <div class="alert">
        <a-alert type="success" :show-icon="true">
          <div slot="message">
            共追踪到 {{ dataSource.length }} 条近期HTTP请求记录
            <a
              style="margin-left: 24px"
              type="primary"
              icon="search"
              @click="search"
              >点击刷新</a
            >
          </div>
        </a-alert>
      </div>
      <!-- 表格区域 -->
      <a-table
        :columns="columns"
        :rowKey="record => record.timestamp"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x: '100%' }"
        @change="handleTableChange"
      >
      </a-table>
    </div>
  </a-card>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");

export default {
  data() {
    return {
      advanced: false,
      dataSource: [],
      pagination: {
        defaultPageSize: 10,
        defaultCurrent: 1,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: false
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "请求时间",
          dataIndex: "timestamp",
          width: "20%",
          customRender: text => {
            return moment(text).format("YYYY-MM-DD HH:mm:ss");
          }
        },
        {
          title: "请求方法",
          dataIndex: "request.method",
          width: "13%",
          customRender: text => {
            return text;
          },
          filters: [
            { text: "GET", value: "GET" },
            { text: "POST", value: "POST" },
            { text: "PUT", value: "PUT" },
            { text: "DELETE", value: "DELETE" }
          ],
          filterMultiple: true,
          onFilter: (value, record) => record.request.method.includes(value)
        },
        {
          title: "请求URL",
          dataIndex: "request.uri",
          customRender: text => {
            return text.split("?")[0];
          }
        },
        {
          title: "响应状态",
          dataIndex: "response.status",
          width: "13%",
          customRender: text => {
            return text;
          }
        },
        {
          title: "请求耗时",
          dataIndex: "timeTaken",
          width: "13%",
          customRender: text => {
            return text + " ms";
          }
        }
      ];
    }
  },
  mounted() {
    this.fetch();
  },
  methods: {
    search() {
      this.fetch();
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      this.fetch();
    },
    fetch() {
      this.loading = true;
      this.$get("actuator/httptrace").then(r => {
        let data = r.data;
        this.loading = false;
        let filterData = [];
        for (let d of data.traces) {
          if (
            d.request.method !== "OPTIONS" &&
            d.request.uri.indexOf("httptrace") === -1
          ) {
            filterData.push(d);
          }
        }
        this.dataSource = filterData;
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../../public/less/Common";
.alert {
  margin-bottom: 0.5rem;
}
</style>
